{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>编辑博客</title>
    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/pace.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/custom.css' %}">
    <link rel="stylesheet" href="{% static 'edit/css/style.css' %}"/>
    <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'edit/css/editormd.css' %}"/>

    <!-- js -->
    <script src="{% static 'blog/js/jquery-2.1.3.min.js' %}"></script>
    <script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'blog/js/pace.min.js' %}"></script>
    <script src="{% static 'blog/js/modernizr.custom.js' %}"></script>

</head>
<body>
{% include 'head.html' %}
<div class="content-body" id="layout">
    <form action="{% url 'blog:edit' %}" method="post">
        {% csrf_token %}
        <div id="layout">
            <div class="input-group input-group-lg" style="width: 90%;margin: auto">
                <input type="text" name="title" class="form-control" placeholder="请输入标题" style="border-bottom: 0">
                <span class="input-group-btn" style="width: 10%">
                    <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal"
                            style="width: 100%">
                        发布
                    </button>
                </span>
            </div><!-- /input-group -->
            <div id="test-editormd">
                <textarea name="body" style="display:none;"></textarea>
            </div>
        </div><!--编写博客-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">摘要·分类·标签</h4>
                    </div>
                    <div class="modal-body">
                        <textarea placeholder="请输入摘要,不超过100个字" name="excerpt"
                                  style="margin-top: 10px;min-height: 150px;width: 100%"></textarea>
                        <div class="row" style="margin-top: 10px">
                            <div class="dropdown col-md-4">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                        name="category" style="width: 100%;">
                                    选择分类
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    {% for category in category_list %}
                                        <li id="category-{{ category.id }}" class="add-tags"><a
                                                href="#">{{ category.name }}</a></li>
                                    {% endfor %}
                                </ul>
                                <input name="category" class="content-input" placeholder="" value="" type="text"
                                       style="display: none">
                            </div><!--分类选择框-->
                            <div class="dropdown col-md-4">
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                        style="width: 100%;">
                                    选择标签
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    {% for tag in tag_list %}
                                        <li id="tag-{{ tag.id }}" class="add-tags"><a
                                                href="#">{{ tag.name }}</a></li>
                                    {% endfor %}
                                </ul>
                                <input name="tags" class="content-input" value="" type="text" placeholder=""
                                       style="display: none">

                            </div><!--标签下拉框-->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div><!--弹出窗口-->
    </form>
</div>
<script type="text/javascript">
    var testEditor;

    $(function () {
        // You can custom @link base url.
        editormd.urls.atLinkBase = "https://github.com/";

        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 720,
            toc: true,
            //atLink    : false,    // disable @link
            //emailLink : false,    // disable email address auto link
            todoList: true,
            path: '{% static 'edit/lib/' %}'
        });
    });
</script>
<script type="text/javascript">
    $('#myModal').on('shown.bs.modal', function () {
        $('#myModal').focus()
    })
</script><!--控制弹窗-->
<script type="text/javascript">
    $('.add-tags').click(function () {
        var doc = $(this).parent('.dropdown-menu').siblings("#dropdownMenu1");
        var input = $(this).parent('.dropdown-menu').siblings(".content-input");
        input.attr("value", $(this).attr("id"));
        doc.html($(this).text() + "<span class=\"caret\"></span>");
    })
</script>
<script src="{% static 'edit/examples/js/jquery.min.js' %}"></script>
<script src="{% static 'edit/editormd.js' %}"></script>
<script src="{% static 'blog/js/script.js' %}"></script>
</body>
</html>
